<template>
  <div class="photolist">
    <van-tabs @click="handleClickTab">
      <van-tab v-for="cate in cates" :title="cate.title" :key="cate.id" />
    </van-tabs>

    <div class="wrapper" ref="wrapper">
      <div>
        <div v-if="images.length===0">暂无内容</div>
        <ul class="image-box" v-else>
          <li v-for="image in images" :key="image.id">
            <img v-lazy="image.img_url" @click="tophotoinfo(image.id)" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  data: () => ({
    cates: [],
    images: [],
    options: {
      scrollY: {
        type: Boolean,
        default: false
      },
      click: true
    }
  }),
  created() {
    this.getimgcategory(), this.getimages(0)
  },
  mounted() {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, this.options)
    })
  },
  methods: {
    async getimgcategory() {
      const {
        data: { status, message }
      } = await this.$axios.get('api/getimgcategory')
      if (status !== 0) this.$Toast(message)
      message.unshift({
        id: 0,
        title: '全部'
      })
      this.cates = message
    },
    async getimages(id) {
      const {
        data: { status, message }
      } = await this.$axios.get('api/getimages/' + id)
      if (status !== 0) this.$Toast(message)
      console.log(message)
      this.images = message
    },
    handleClickTab(id) {
      this.getimages(id)
    },
    tophotoinfo(id) {
      this.$router.push('/home/photoinfo/' + id)
    }
  }
}
</script>
<style lang="less" scoped>
.wrapper {
  height: 527px;
  overflow: hidden;
}
.image-box {
  img {
    height: 100%;
    width: 100%;
  }
}
</style>
